<template>
  <div>
    <!-- <a
    v-if="isA"
    class="color-light el-button--text margin-m-right"
    target="blank"
    :href="url"
    :download="fileName"
    @click="handleReviewImage(url)"
  > -->
    <el-button v-if="isA" @click="handleReviewImage">
      <a
        class="section-link"
        style="text-decoration:none;"
        target="blank"

      >
        <slot>预览</slot>
      </a>
    </el-button>
    <el-button  v-else-if="isPdf">
      <a
        class="section-link"
        style="text-decoration:none;"
        target="blank"
        :href="url"
      >
        <slot>预览</slot>
      </a>
    </el-button>
    <el-button v-else v-bind="$attrs" @click="handleReview">
      <slot>预览</slot>
    </el-button>
    <el-dialog
      v-if="isA"
      title="预览图片"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
      :modal="false"
    >
      <img width="100%" height="100%" :src="url" alt="这是一段图片预览" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  props: {
    url: {
      type: String,
      default: undefined
    },
    fileType: {
      type: String,
    },
    name: {
      type: String
    }
  },
  computed: {
    // fileName() {
    //   // return (this.name || `文件${Date.now()}`) + `.${this.fileType}`
    //   // return this.name
    // },
    isMs() {
      // return (
      //   this.fileType === 'pdf'
      //   || this.fileType === 'jpg'
      //   || this.fileType === 'png'
      //   || this.fileType === 'jpeg'
      // )
      return (
        this.url.indexOf("doc") !== -1 ||
        this.url.indexOf("docx") !== -1 ||
        this.url.indexOf("xls") !== -1 ||
        this.url.indexOf("xlsx") !== -1
      );
    },
    isA() {
      // return (
      //   this.fileType === 'pdf'
      //   || this.fileType === 'jpg'
      //   || this.fileType === 'png'
      //   || this.fileType === 'jpeg'
      // )
      return (
        this.url.indexOf("jpg") !== -1 ||
        this.url.indexOf("png") !== -1 ||
        this.url.indexOf("jpeg") !== -1
      );
    },
    isPdf() {
      return this.url.indexOf("pdf") !== -1;
    }
  },
  methods: {
    handleReviewImage() {
      console.log("url",this.url)
      this.dialogVisible = true;
    },
    handleReview() {
      console.log('url',this.url);
      if (this.url) {
        console.log(this.isMs);
        switch (this.isMs) {
          // case 'doc':
          // case 'docx':
          // case 'xls':
          case true:
            window.open(
              "https://view.officeapps.live.com/op/view.aspx?src=" + this.url
            );
            break;
          default:
            this.handleWarning("该文件不支持预览，请下载后查看");
            break;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.section-link {
  color:#606266;
}

.section-link:hover {
  color:rgb(64, 158, 255)
}
</style>